<template>
    <ul>
        <li v-for="diary in diary_list"
            :key="diary.id"
        >
            <div class="img-container head-container">
                <img :src="diary.head_img" alt="">
            </div>
            <div>
                <span>{{ diary.nick_name }}</span>
                <div><i class="light-gray">点赞</i> {{ diary.thumb_up_count }} | <i class="light-gray">评论</i> {{ diary.comments_count }}</div>
                <p class="light-gray">{{ diary.diary_content }}</p>
            </div>
            <div>
                <div class="img-container pic-container">
                    <img :src="diary.diary_before_pic" alt="">
                    <span class="before-tag">术前</span>
                </div>
                <div class="img-container pic-container">
                    <img :src="diary.diary_after_pic" alt="">
                    <span class="after-tag">术后</span>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
    export default{
        props:['diary_list'],
    }
</script>
<style scoped lang='less'>
    ul{
        li{
            margin-left: 5px;
            overflow: hidden;
            padding: 15px 15px 15px 25px;
            &:hover{
                box-shadow: 0 0 10px 1px rgba(0,0,0,0.1)
            }
            >div{
                float: left;
                &:nth-child(3){
                    float: right;
                }
                >span{
                    font-weight: bold;
                    font-size: 16px;
                }
                div{
                    line-height: 30px;
                }
                p{
                    width: 350px;
                    line-height: 26px;
                    height: 104px;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp:4;  
                }
            }
            .head-container{
                border-radius: 35px;
                width: 70px;
                height: 70px;
                margin-right: 20px;
            }
            .pic-container{
                position: relative;
                margin-left: 10px;
                width: 198px;
                height: 150px;
                float: left;
                border-radius: 8px;
                span{
                    color: white;
                    position: absolute;
                }
                .before-tag{
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.3);
                    line-height: 20px;
                    padding: 0 5px;
                }
                .after-tag{
                    left: 0;
                    bottom: 0;
                    background: rgba(42, 221, 197, 0.6);
                    line-height: 20px;
                    padding: 0 5px;
                }
            }

        }
    }
</style>
